<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='zhyyglhtxt'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <script src="${web_domain}/resources/dist-picker/distpicker.min.js"></script>
    <style>
        html {
            background: #fff;
        }

        .layui-form-item .layui-input-inline {
            width: 350px;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
        <form:form commandName="shoppingCard" method="POST" class="layui-form" id="serviceForm">

            <input type="hidden" name="_method" value="${_method }"/>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='ffbh'/></label>
                <div class="layui-input-inline">
                    <form:input path="cardNo" lay-verify="required" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='gwkmc'/></label>
                <div class="layui-input-inline">
                    <form:input path="name" lay-verify="required" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mz'/></label>
                <div class="layui-input-inline">
                    <form:input path="faceValue" lay-verify="required" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sj2'/></label>
                <div class="layui-input-inline">
                    <form:input path="price" lay-verify="required" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='gwksl'/></label>
                <div class="layui-input-inline">
                    <form:input path="number" lay-verify="required" class="layui-input"/>
                </div>
            </div>


            <div id="channels" class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sypl'/></label>
                <div class="layui-input-inline">
                    <c:forEach var="item" varStatus="status" items="${goodsChannels}">
                        <input type="checkbox" lay-skin="primary" name="channels[${status.index}].goodsChannel.id" value="${item.id}" title="${item.name}">
                    </c:forEach>
                </div>
            </div>

<%--            <div class="layui-form-item">--%>
<%--                <label class="layui-form-label"><b style="color:red">*</b> 适用地区</label>--%>
<%--                <div class="layui-input-inline">--%>
<%--                    <input type="radio" name="areaType" value="1" title="所有地区" checked/>--%>
<%--                    <input type="radio" name="areaType" value="2" title="指定地区">--%>
<%--                </div>--%>
<%--            </div>--%>
            <input type="hidden" name="areaType" value="1">

<%--            <div class="layui-inline" style="margin-bottom: 20px">--%>
<%--                <label class="layui-form-label"></label>--%>
<%--                <div class="layui-input-inline" style="margin-right: 20px;">--%>
<%--                    <div id="distpicker">--%>
<%--                        <select style="min-width: 129px" id="province" class="layui-select" lay-ignore></select>--%>
<%--                        <select style="min-width: 129px" id="city" class="layui-select" lay-ignore></select>--%>
<%--                        <select style="min-width: 129px" id="area" class="layui-select" lay-ignore></select>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <a style="color: #009688; cursor: pointer; user-select: none">添加</a>--%>
<%--            </div>--%>

<%--            <div class="layui-form-item">--%>
<%--                <label class="layui-form-label"></label>--%>
<%--                <div class="layui-input-inline" style="width: 600px">--%>
<%--                    <table id="address-table" class="layui-table" style="width: 100%">--%>
<%--                        <tr>--%>
<%--                            <th>省</th>--%>
<%--                            <th>市</th>--%>
<%--                            <th>区</th>--%>
<%--                        </tr>--%>
<%--                    </table>--%>
<%--                </div>--%>
<%--            </div>--%>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='yxq'/></label>
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 120px">
                        <input type="radio" name="validType" value="1" title="<fmt:message key='gdrq'/>" checked/>
                    </div>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" style="width: 200px" readonly id="dateStr" name="dateStr"/>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 120px">
                        <input type="radio" name="validType" value="2" title="<fmt:message key='gmhsy'/>">
                    </div>
                    <div class="layui-input-inline" style="width: 50px">
                        <input type="text" name="validDays" class="layui-input" value="0"/>
                    </div>
                    <span class="layui-form-mid layui-word-aux"><fmt:message key='tnksy'/></span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sysj1'/></label>
                <div class="layui-input-inline">
                    <input type="radio" lay-filter="merchantType" name="merchantType" value="1" title="<fmt:message key='sysj2'/>" checked/>
                    <input type="radio" lay-filter="merchantType" name="merchantType" value="2" title="<fmt:message key='zdsj'/>">
                </div>
            </div>

            <div class="layui-form-item layui-hide merchant-type2">
                <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='zdsj'/></label>
                <div class="layui-input-inline" style="width: 600px;">
                    <input type="button" value="<fmt:message key='xzsj'/>" class="layui-btn layui-btn-normal layui-btn-sm" onclick="selectMerchants()">
                    <table id="merchant_tables" class="layui-table" style="width: 100%;">
                        <thead>
                        <tr>
                            <th><fmt:message key='sjmc'/></th>
                            <th><fmt:message key='yhm'/></th>
                            <th><fmt:message key='sjh'/></th>
                            <th style="width: 80px;"><fmt:message key='cz'/></th>
                        </tr>
                        </thead>
                        <tbody id="merchant-body">
                        <c:forEach varStatus="status" var="item" items="${shoppingCard.merchants}">
                            <tr>
                                <td>${item.merchant.username}<input class="merchant_id" type="hidden" name="merchants[${status.index}].merchant.id" value="${item.merchant.id}"></td>
                                <td><a class="delete-line"><fmt:message key='sc'/></a></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sysp'/></label>
                <div class="layui-input-inline">
                    <input type="radio" lay-filter="goodsType" name="goodsType" value="1" title="<fmt:message key='sysp1'/>" checked/>
                    <input type="radio" lay-filter="goodsType" name="goodsType" value="2" title="<fmt:message key='zdsp'/>">
                </div>
            </div>

            <div class="layui-form-item layui-hide goods-type2">
                <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='zdsp'/></label>
                <div class="layui-input-inline" style="width: 600px;">
                    <input type="button" value="<fmt:message key='xzsp'/>" class="layui-btn layui-btn-normal layui-btn-sm select-goods" onclick="selectGoods()">
                    <table class="layui-table" style="width: 100%;">
                        <thead>
                        <tr>
                            <th><fmt:message key='spmc'/></th>
                            <th style="width: 80px;"><fmt:message key='cz'/></th>
                        </tr>
                        </thead>
                        <tbody id="table-body">
                        <c:forEach varStatus="status" var="item" items="${shoppingCard.goods}">
                            <tr id="${item.goods.id}">
                                <td>${item.goods.name}<input type="hidden" name="goods[${status.index}].goods.id" value="${item.goods.id}"></td>
                                <td><a class="delete-line"><fmt:message key='sc'/></a></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-input-block">
                <div style="display: none"><input type="button" value="<fmt:message key='bc'/>" class="layui-btn" id="submit" lay-filter="submit" lay-submit></div>
            </div>

        </form:form>
    </div>
</div>


<script type="text/javascript" src="${web_domain}/resources/plugins/region2.0.js"></script>
<script>

    var count = $("#table-body tr").length;
    var count2 = $("#merchant-body tr").length;

    function selectGoods() {
        var ids = [];
        $('#merchant_tables .merchant_id').each(function (index, item) {
            ids.push($(item).val());
        })
        console.log(ids.join(';'));

        layer.open({
            type: 2,
            content: "${web_domain}/mall/marketing/shoppingCard/selectGoods?ids=" + ids.join(';'),
            area: ["90%", "90%"],
            btn: ["<fmt:message key='qd1'/>", "<fmt:message key='qx'/>"],
            yes: function (index, layero) {
                var goods = layero.find('iframe').contents().find("input.feijin-check:checked");
                goods.each(function (index, item) {
                    var id = item.getAttribute("data-id");
                    if ($("#" + id).length === 0) {
                        var name = item.getAttribute("data-name");
                        $("#table-body").append('<tr id="' + id + '">\n' +
                            '                        <td>' + name + '<input type="hidden" name="goods[' + count + '].goods.id" value="' + id + '"></td>\n' +
                            '                        <td><a class="delete-line"><fmt:message key='sc'/></a></td>\n' +
                            '                    </tr>');
                        count++;
                    }
                });

                layer.close(index);
            }
        })
    }

    function selectMerchants() {
        var ids = [];
        $('#channels input:checked').each(function (index, item) {
            ids.push($(item).val());
        })
        console.log(ids);

        layer.open({
            type: 2,
            content: "${web_domain}/mall/marketing/shoppingCard/selectMerchants?ids=" + ids.join(';'),
            area: ["90%", "90%"],
            btn: ["<fmt:message key='qd1'/>", "<fmt:message key='qx'/>"],
            yes: function (index, layero) {
                var merchants = layero.find('iframe').contents().find("input.feijin-check:checked");
                merchants.each(function (index, item) {
                    var id = item.getAttribute("data-id");
                    if ($("#" + id).length === 0) {
                        var name = item.getAttribute("data-name");
                        var mobile = item.getAttribute("data-mobile");
                        var nickname = item.getAttribute("data-nickname");
                        $("#merchant-body").append('<tr id="' + id + '">\n' +
                            '                        <td>' + name + '<input  class="merchant_id" type="hidden" name="merchants[' + count2 + '].merchant.id" value="' + id + '"></td>\n' +
                            '                        <td>' + nickname + '</td>\n' +
                            '                        <td>' + mobile + '</td>\n' +
                            '                        <td><a class="delete-line"><fmt:message key='sc'/></a></td>\n' +
                            '                    </tr>');
                        count2++;
                    }
                });

                layer.close(index);
            }
        })
    }

    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;

        form.on('radio(goodsType)', function (e) {
            if (e.value === '1') {
                $(".goods-type2").addClass("layui-hide");
            } else if (e.value === '2') {
                $(".goods-type2").removeClass("layui-hide");
            }
        });

        form.on('radio(merchantType)', function (e) {
            if (e.value === '1') {
                $(".merchant-type2").addClass("layui-hide");
            } else if (e.value === '2') {
                $(".merchant-type2").removeClass("layui-hide");
            }
        });

        laydate.render({
            elem: '#dateStr',
            type: 'date',
            range: true
        });

        $(document).on("click", ".delete-line", function () {
            $(this).parent().parent().remove();
        });

        $("#distpicker").distpicker({
            province: '<fmt:message key='qxzs'/>',
            city: '<fmt:message key='qxzs1'/>',
            district: '<fmt:message key='qxzq'/>'
        });

        form.on('submit(submit)', function (data) {

            $("#serviceForm").ajaxSubmit({
                success: function (result) {
                    if (result.status) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.$("#search").click();
                    } else {
                        layer.msg(result.message);
                    }
                }
            });
        });
    });

    $(function () {

        //个人主体信息的省市区级联选择下拉框
        <%--var merchantPersonalInfonames = ["merchantPersonalInfo-province", "merchantPersonalInfo-city", "merchantPersonalInfo-area"];--%>
        <%--var merchantPersonalInfovalues = ["${merchant.merchantPersonalInfo.province}", "${merchant.merchantPersonalInfo.city}", "${merchant.merchantPersonalInfo.area}"];--%>
        <%--region($, merchantPersonalInfonames, merchantPersonalInfovalues);--%>

    });
</script>
</body>
</fmt:bundle>
</html>